import { Block, View, Image, CoverView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import withWeapp from '@tarojs/with-weapp'
import './select.scss'
// Componet/Componet.js
const app = Taro.getApp()

@withWeapp('Component')
class _C extends Taro.Component {
  _observeProps = []
  state = {
    selectShow: false, //初始option不显示
    nowText: app.globalData.cut_area, //初始内容
    animationData: {} //右边箭头的动画
  }
  ready = () => {
    this.setData({
      nowText: app.globalData.cur_area
    })
  }
  selectToggle = () => {
    var nowShow = this.data.selectShow //获取当前option显示的状态
    //创建动画
    var animation = Taro.createAnimation({
      timingFunction: 'ease'
    })
    this.animation = animation
    if (nowShow) {
      animation.rotate(0).step()
      this.setData({
        animationData: animation.export()
      })
    } else {
      animation.rotate(180).step()
      this.setData({
        animationData: animation.export()
      })
    }
    this.setData({
      selectShow: !nowShow
    })
  }
  setText = e => {
    var nowData = this.properties.propArray //当前option的数据是引入组件的页面传过来的，所以这里获取数据只有通过this.properties
    var nowIdx = e.target.dataset.index //当前点击的索引
    var nowText = nowData[nowIdx].text //当前点击的内容
    var nowID = nowData[nowIdx].id
    //再次执行动画，注意这里一定，一定，一定是this.animation来使用动画
    var nowDate = {
      id: nowID,
      text: nowText
    }
    this.triggerEvent('myget', nowDate)
    this.animation.rotate(0).step()
    this.setData({
      selectShow: false,
      nowText: nowText,
      animationData: this.animation.export()
    })
  }
  config = {
    component: true
  }

  render() {
    const { propArray: propArray } = this.props
    const {
      nowText: nowText,
      animationData: animationData,
      selectShow: selectShow
    } = this.state
    return (
      <View className="com-selectBox">
        <View className="com-sContent" onClick={this.selectToggle}>
          <View className="com-sTxt">{nowText}</View>
          <Image
            src={require('../../image/down.png')}
            className="com-sImg"
            animation={animationData}
          ></Image>
        </View>
        {selectShow && (
          <View className="com-border">
            {selectShow && (
              <CoverView className="com-sList">
                {propArray.map((item, index) => {
                  return (
                    <CoverView
                      data-index={index}
                      key="key"
                      className="com-sItem {"
                      onClick={this.setText}
                    >
                      {item.text}
                    </CoverView>
                  )
                })}
              </CoverView>
            )}
          </View>
        )}
      </View>
    )
  }
}

export default _C
